<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的样式</title>
    <style type="text/css">
        table {
            width: 300px;
            margin: 0 auto;
            /*
                table标签和td标签之间默认有一个距离，通过border-spacing属性可以设置这个距离
            */
            border: 1px solid black;
            border-spacing: 0;
            /*
                border-collapse: collapse  可以设置表格边框的合并， 此时可以不给table标签指定边框也是可以的

                如果设置了边框合并，则border-spacing属性自动失效
            */
            border-collapse: collapse;
        }
        td, th{
            border: 1px solid black;
        }

        /*隔行变色*/
        tr:nth-child(even) {
            background-color: green;
        }

        /*鼠标移入变色*/
        tr:hover {
            background-color: #cc0000;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
    </table>

<script type="text/javascript">
    var str = "";
    str += "<table class='layui-table'>";
    for(var i = 0; i < 14;i++) {
        str += "<tr>";
        for(var j = 0; j < 4;j++) {
            str += "<td>" + (i + j) + "</td>";
        }
        str += "</tr>";
    }
    str += "</table>";
    document.write(str);
</script>
</body>
</html>